<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>模拟一个数据监测</title>
</head>
<body>


<!-- 准备好一个容器-->
<div id="root">


</div>
</body>
<script type="text/javascript">
  let data = {
    name: '尚硅谷',
    address: '北京'
  }
  const obs = new Observer(data)
  console.log(obs)

  // 准备一个vm实例对象
  let vm={}
  vm._data=data=obs

  function Observer(obj) {
    //   汇总对象中所有的属性形成一个数组
    const keys = Object.keys(obj)
    //   遍历
    keys.forEach(k => {
      // this是Observer实例对象
      Object.defineProperty(this, k, {
        get() {
          return obj[k]
        },
        set(val) {
          obj[k] = val
        }
      })
    })
  }
</script>
</html>